<div class="f-utils-fill-flex-column h-100 pt-2 pl-2 border-bottom">
  <div class="f-utils-fill-flex-row">
    <div class="f-utils-fill f-utils-overflow-auto mr-3">
      <div class="d-flex mb-2" *ngFor="let button of buttons; trackBy: trackById;">
        <div class="templat-button-wrapper" [class.active]="button === selectedButton">
          <div style="flex:1;" class="f-form-layout farris-form-controls-inline" (click)="selectButtonChanged(button);">
            <div>{{button.text}}</div>
          </div>
          <div style="width: 60px;">
            <button class="btn btn-link btn-icontext mx-0" type="button" (click)="removeItem(button)">
              <span class="f-icon f-icon-minus mr-0"></span>
            </button>
            <button class="btn btn-link btn-icontext mx-0" type="button" (click)="moveUpItem(button)">
              <span class="f-icon f-icon-arrow-up mr-0"></span>
            </button>
            <button class="btn btn-link btn-icontext mx-0" type="button" (click)="moveDownItem(button)">
              <span class="f-icon f-icon-arrow-down mr-0"></span></button>
          </div>
        </div>
      </div>
      <div class="button-list-footer">
        <button class="btn btn-link btn-icontext" type="button" (click)="addItem();">
          <span class="f-icon f-icon-add"></span>新增
        </button>
      </div>
    </div>
    <div style="width:240px" [hidden]="!buttons || buttons.length===0">
      <app-property-panel [(propertyConfig)]="propertyConfig" [(propertyData)]="propertyData" [showCloseBtn]="false"
        [isPersitOpenState]="true" [isShowPanel]="true" [dynamicControl]="true" isWhiteTheme="true"
        (propertyChanged)="propertyChanged($event)" (submitModal)="onPropertyModalChanged($event)">
      </app-property-panel>
    </div>
  </div>
</div>